<template>
	<div>
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
		<city-alphabet :cities="cities" @change="handleLetterClick"></city-alphabet>
	</div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
	export default{
		components:{
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data(){
			return{
				cities:{},
				hotCities:[],
				letter:""
			}
		},
		methods:{
			getCityInfo(){
				axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
			},
			handleGetCityInfoSucc(res){
				if(res){
					this.cities=res.data.data.cities
					this.hotCities=res.data.data.hotCities
				}
			},
			handleLetterClick(letter){
				this.letter=letter
			}
		},
		mounted(){
			this.getCityInfo()
		}
	}
</script>